<template>
  <div class="device">
    <div class="device_top">
      <!-- 标题 -->
      <div class="device_title">
        <el-dropdown @command="handleCommand">
          <div class="el-dropdown-link">
            {{ proname }}
            <img src="../../assets/images/cut.png" alt class="cut" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in project"
              :key="item.id"
              :command="item.id"
              >{{ item.projectName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 列表中每一项数据 -->
        <div class="records_title_num">
          <div class="records_title_num_item">
            <span class="records_title_num_item_num">
              <b>
                <img src="../../assets/images/zh/records_list_title1.png" alt />
              </b>
              全部设备数
            </span>
            <el-tag class="records_title_num_size">{{ allDevice }}</el-tag>
          </div>
          <div class="records_title_num_item">
            <span
              class="records_title_num_item_num"
              style="background: #9ea0a5"
            >
              <b>
                <img src="../../assets/images/zh/records_list_title3.png" alt />
              </b>
              维修结束设备数
            </span>
            <el-tag
              class="records_title_num_size"
              style="border-color: #7e7e7e; color: #7e7e7e"
              >{{ finsh }}</el-tag
            >
          </div>
          <div class="records_title_num_item">
            <span
              class="records_title_num_item_num"
              style="background: #e6492d"
            >
              <b>
                <img src="../../assets/images/zh/records_list_title4.png" alt />
              </b>
              本月即将过保设备数
            </span>
            <el-tag
              class="records_title_num_size"
              style="border-color: #e6492d; color: #e6492d"
              >{{ thisMonth }}</el-tag
            >
          </div>
          <div class="records_title_num_item">
            <span
              class="records_title_num_item_num"
              style="background: #ffb300"
            >
              <b>
                <img src="../../assets/images/zh/records_list_title2.png" alt />
              </b>
              下个月即将过保设备数
            </span>
            <el-tag
              class="records_title_num_size"
              style="border-color: #ffb300; color: #ffb300"
              >{{ nextMonth }}</el-tag
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 所有搜索框 -->
    <div class="device_input">
      <el-form class="demo-ruleForm" :inline="true">
        <el-form-item
          label="设备编号:"
          prop="deviceNumber"
          class="device_input_item"
        >
          <el-input
            v-model="deviceListQuery.deviceNumber"
            @change="getrepairCenter"
            clearable
            placeholder="请输入设备编号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="设备名称:"
          prop="deviceName"
          class="device_input_item"
        >
          <el-input
            v-model="deviceListQuery.deviceName"
            @change="getrepairCenter"
            clearable
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="设备类型:"
          prop="deviceType"
          class="device_input_item"
        >
          <el-select
            v-model="deviceListQuery.deviceType"
            placeholder="请选择设备类型"
            clearable
            @change="getrepairCenter"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="设备型号:"
          prop="modelId"
          class="device_input_item"
        >
          <el-select
            v-model="deviceListQuery.modelId"
            placeholder="请选择设备型号"
            clearable
            @change="getrepairCenter"
          >
            <el-option
              v-for="item in versionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属分支:" prop="name" class="device_input_item">
          <el-cascader
            v-model="workingStr"
            :options="workingWordOption"
            :props="workingWordProps"
            clearable
          ></el-cascader>
        </el-form-item>
        <!-- <el-form-item label="保修状态:" prop="status" class="device_input_item">
          <el-select v-model="deviceListQuery.name" placeholder="请选择保修状态">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item
          label="到期时间:"
          prop="endTime"
          class="device_input_item"
        >
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            placeholder="选择保养时间"
            @change="handlerDate"
          ></el-date-picker>
        </el-form-item>
        <el-form-item class="device_input_item">
          <el-button type="primary" class="device_btn" @click="handlerDate"
            >确认搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table
      :data="repairCenter"
      border
      class="records_table"
      :header-cell-style="{ background: '#FAFAFA', color: '#606266' }"
    >
      <el-table-column prop="no" label="序号" width="80"></el-table-column>
      <el-table-column label="设备信息" width="480">
        <template slot-scope="scope">
          <div class="name content">
            <viewer>
              <img
                alt
                :src="
                  !scope.row.org ||
                  scope.row.org === '' ||
                  scope.row.org === null
                    ? errImg
                    : scope.row.org
                "
                :onerror="errImg"
                title="查看高清图片"
                class="img"
              />
            </viewer>
            <div>
              <div class="name">
                <img src="../../assets/images/code.png" alt class="icon" />
                <div class="label">
                  设备编号:
                  <span v-if="scope.row.deviceNumber == null" style="color: red"
                    >暂无数据</span
                  >
                  <span>{{ scope.row.deviceNumber }}</span>
                </div>
              </div>
              <div class="name">
                <img src="../../assets/images/name.png" alt class="icon" />
                <div class="label">
                  设备名称:
                  <span v-if="scope.row.name == null" style="color: red"
                    >暂无数据</span
                  >
                  <span>{{ scope.row.name }}</span>
                </div>
              </div>
              <div class="name">
                <img src="../../assets/images/type.png" alt class="icon" />
                <div class="label">
                  设备类型:
                  <span v-if="scope.row.typeName == null" style="color: red"
                    >暂无数据</span
                  >
                  <span>{{ scope.row.typeName }}</span>
                </div>
              </div>
              <div class="name">
                <img src="../../assets/images/model.png" alt class="icon" />
                <div class="label">
                  设备型号:
                  <span v-if="scope.row.modelName == null" style="color: red"
                    >暂无数据</span
                  >
                  <span>{{ scope.row.modelName }}</span>
                </div>
              </div>
              <div class="name">
                <img src="../../assets/images/branch.png" alt class="icon" />
                <div class="label">
                  所属分支: {{ scope.row.org | ellipsis }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="保养套餐">
        <template>
          <div>
            <el-tooltip class="item" effect="dark" content="此功能未上线" placement="top-start">
              <el-link type="primary">点击查看</el-link>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>-->
      <el-table-column prop="repair_start_time" label="维修开始日期">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.repair_start_time == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.repair_start_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="maintain_time" label="保修期">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.maintain_time == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.maintain_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="repair_end_time" label="维修结束期">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.repair_end_time == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.repair_end_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="保修状态"
        prop="deviceGuarantee"
        fixed="right"
        width="200"
      >
        <template slot-scope="scoped">
          <div>
            <el-tag type="success" v-if="scoped.row.deviceGuarantee == 1"
              >保修期内</el-tag
            >
            <el-tag type="danger" v-else-if="scoped.row.deviceGuarantee == 7"
              >临近保修期 7天</el-tag
            >
            <el-tag type="info" v-else-if="scoped.row.deviceGuarantee == 3"
              >保修期结束</el-tag
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" style="margin-bottom: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="deviceListQuery.pageSize"
        :current-page="deviceListQuery.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="devicetotal"
        class="management_page"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getProject,
  deviceList,
  repairCenter,
  repairCount,
  devicTypeList,
  devicModelList,
  projectMenu,
  projectlist
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      recordsForm: {
        name: ""
      },
      value1: null,
      errImg: 'this.src="' + require("../../assets/images/chest.png") + '"',
      // 表格的数据
      tableData: [],
      recordsListRules: {},
      recordsListForm: {
        name: ""
      },
      // 项目id
      value: "",
      //   分页
      deviceListQuery: {
        pageSize: 10,
        pageNumber: 1,
        projectId: "",
        status: "",
        deviceNumber: "",
        deviceName: "",
        deviceType: "",
        modelId: "",
        startTime: "",
        endTime: ""
      },
      repairCenter: [], //项目列表

      devicetotal: 0,
      project: [],
      // 维修记录设备计算
      allDevice: "",
      thisMonth: "",
      nextMonth: "",
      finsh: "",
      // 设备类型列表
      typeList: [],
      //设备型号列表
      versionList: [],
      // 三级选中的数据
      workingStr: "",
      //接口返回的数据
      workingWordOption: [],
      // 设备分支的label chldren
      workingWordProps: {
        label: "name",
        children: "children",
        value: "name",
        checkStrictly: true
      }
    };
  },
  async created() {
    this.value = window.localStorage.getItem("projectId");
    await this.getDataInit();
  },
  // 当文字大15的时候添加省略号
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 15) + "...";
      }
      return value;
    }
  },
  computed: {
    ...mapState(["org_id"]),
    proname() {
      if (this.project.length == 0) {
        return "";
      }
      const index = this.project.filter(v => v.id == this.value)[0];
      return index["projectName"];
    }
  },
  watch: {
    org_id(val) {
      this.deviceListQuery.pageNumber = 1;
      window.localStorage.removeItem("projectId");
      this.getProject();
      this.getrepairCount();
      this.getSelect();
    }
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getProject();
        this.getrepairCount();
        this.getSelect();
      }
    },
    //获取项目列表
    getProject() {
      this.postRequest(getProject, { companyId: this.org_id }).then(res => {
        if (res.code === 200) {
          this.project = res.data;
          if (res.data.length > 0) {
            if (
              window.localStorage.getItem("projectId") == "" ||
              window.localStorage.getItem("projectId") == null
            ) {
              this.value = res.data[0].id;
            }
            this.getrepairCenter(); //获取数据
            this.getprojectlist();
          } else {
            this.value = "";
            this.repairCenter = [];
          }
        } else {
          this.project = [];
          this.value = "";
        }
      });
    },
    handleCommand(command) {
      this.value = command;
      window.localStorage.setItem("projectId", this.value);
      this.getrepairCenter();
    },

    // 根据项目id获取对应的数据
    getprojectlist() {
      const params = {
        projectId: this.value,
        companyId: this.org_id
      };
      this.postRequest(projectlist, params).then(res => {
        if (res.code == 200) {
          this.workingWordOption = res.data;
        }
      });
    },
    // 获取项目中心列表
    getrepairCenter() {
      this.deviceListQuery.projectId = this.value;
      this.postRequest(repairCenter, this.deviceListQuery).then(res => {
        if (res.code == 200) {
          this.repairCenter = res.data.data;
          this.devicetotal = res.data.count;
        }
      });
    },
    // 获取维修记录设备计算
    getrepairCount() {
      this.postRequest(repairCount, { companyId: this.org_id }).then(res => {
        if (res.code == 200) {
          this.allDevice = res.data.allDevice;
          this.thisMonth = res.data.thisMonth;
          this.nextMonth = res.data.nextMonth;
          this.finsh = res.data.finsh;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.deviceListQuery.pageSize = val;
      this.getrepairCenter();
    },
    handleCurrentChange(val) {
      this.deviceListQuery.pageNumber = val;
      this.getrepairCenter();
    },
    //获取搜索下拉列表事件
    async getSelect() {
      this.typeList = await this.postRequest(devicTypeList, {
        companyId: this.org_id
      }).then(res => res.data); //设备类型列表
      this.versionList = await this.postRequest(devicModelList, {
        companyId: this.org_id
      }).then(res => res.data); //设备型号
    },
    // 获取所有的分支
    // getprojectMenu() {
    //   this.postRequest(projectMenu).then(res => {
    //     this.deiceoptions = res.data;
    //   });
    // },
    // 时间搜索
    handlerDate(val) {
      if (this.value1 == null) {
        this.deviceListQuery.startTime = "";
        this.deviceListQuery.endTime = "";
        this.getrepairCenter();
      }
      this.deviceListQuery.startTime = val[0];
      this.deviceListQuery.endTime = val[1];
      this.getrepairCenter();
    },
    handlerBranch(val) {
      this.deviceListQuery.projectId = val[0];
      this.deviceListQuery.groupId = val[1];
      this.deviceListQuery.storeId = val[2];
      this.getrepairCenter();
      this.getProject();
    }
  }
};
</script>
<style lang="less" scoped>
// 设备列表
.device {
  padding: 20px;
  .device_top {
    border: 1px solid #eaedf3;
  }

  .device_title {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-width: 1300px;
    padding: 10px;
    .el-dropdown {
      margin: 10px;
      width: 200px;
    }
    .el-dropdown-link {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(62, 63, 66, 1);
      cursor: pointer;
    }

    // 标题
    .cut {
      width: 20px;
      height: 20px;
      margin-left: 10px;
      display: block;
    }
    .records_title_num {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin-left: auto;
      .records_title_num_item {
        margin-top: 7px;
        margin-right: 10px;
        .records_title_num_item_num {
          float: left;
          padding: 0 20px;
          background: #0077f8;
          line-height: 38px;
          text-align: center;
          font-size: 15px;
          color: #ffffff;
          border-radius: 4px;
          b {
            width: 28px;
            height: 28px;
            float: left;
            background: #ffffff;
            position: relative;
            left: -12px;
            top: 5px;

            img {
              width: 21px;
              height: 21px;
              text-align: center;
              position: absolute;
              top: 5px;
              left: 5px;
            }
          }
        }
        .records_title_num_size {
          float: left;
          width: 75px;
          height: 38px;
          border: 1px solid #0077f8;
          line-height: 38px;
          text-align: center;
          font-family: "Microsoft YaHei";
          color: rgba(0, 119, 248, 1);
          font-weight: bold;
          background-color: #ffffff;
          margin-left: 10px;
          margin-right: 10px;
        }
      }
    }
  }
  @media screen and (max-width: 1366px) {
    .records_title_num_item {
      width: 33%;
    }
    .el-dropdown {
      line-height: 70px;
    }
  }

  // 搜索的
  .device_input {
    border: 1px solid #eaedf3;
    margin: 20px auto;
    .demo-ruleForm {
      padding-left: 20px;
      margin-top: 20px;
      .el-form-item__label {
        color: #9ea0a5;
      }
    }
  }
  /*设备名称*/
  .content {
    padding-right: 20px;
    overflow: hidden;
    width: 100%;
  }

  .name {
    display: flex;
    align-items: center;
  }

  .icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
  }
  .img {
    width: 80px;
    height: 120px;
    display: block;
    margin-right: 20px;
  }
}
</style>
